﻿<template v-if="catalog.Model.Products.length > 0">
    <div class="generalMarginSupporter categoryGrid catalog-selectors mb-3">
        @*Rendering mobile left side trigger*@
        <div class="d-flex flex-row row px-3">
            @*Rendering sorting*@
            <template v-if="catalog.Model.PagingFilteringContext.AllowProductSorting">
                <div class="sort-container">
                    <label class="col-form-label">@Loc["Catalog.OrderBy"]</label>
                    <select class="custom-select form-control" id="AvailableSortOption" name="AvailableSortOption" v-on:change="catalog.loadProducts($event.target.value)" aria-label="@Loc["Catalog.OrderBy"]">
                        <template v-for="item in catalog.Model.PagingFilteringContext.AvailableSortOptions">
                            <option :selected="item.Selected" :value="item.Value" :disabled="false">
                                {{item.Text}}
                            </option>
                        </template>
                    </select>
                </div>
            </template>
            <div class="item-statistics d-sm-flex d-none align-items-center mx-auto order-2" id="items_statistics">
                <div class="items-page-size d-none">{{catalog.Model.PagingFilteringContext.TotalItems}}</div>
                <div class="items-per-page d-lg-inline-flex">
                    <span>@Loc["catalog.selectors.items"]</span>
                    <span class="number">
                        <template v-if="catalog.Model.PagingFilteringContext.TotalPages == catalog.Model.PagingFilteringContext.PageNumber">
                            <span v-html="(catalog.Model.PagingFilteringContext.PageSize * catalog.Model.PagingFilteringContext.PageNumber) - catalog.Model.PagingFilteringContext.PageSize + 1"></span>
                            <span> - </span>
                            <span v-html="catalog.Model.PagingFilteringContext.TotalItems"></span>
                        </template>
                        <template v-else>
                            <span v-html="(catalog.Model.PagingFilteringContext.PageSize * catalog.Model.PagingFilteringContext.PageNumber) - catalog.Model.PagingFilteringContext.PageSize + 1"></span>
                            <span> - </span>
                            <span v-html="catalog.Model.PagingFilteringContext.PageSize * catalog.Model.PagingFilteringContext.PageNumber"></span>
                        </template>
                    </span>
                </div>
                <div class="items-separator">@Loc["catalog.selectors.of"]</div>
                <div class="items-total">{{catalog.Model.PagingFilteringContext.TotalItems}}</div>
            </div>
            @*page size*@
            <template v-if="catalog.Model.PagingFilteringContext.AllowCustomersToSelectPageSize">
                <div class="sort-container">
                    <label class="col-form-label">@Loc["Catalog.PageSize"]</label>
                    <select class="custom-select form-control" id="PageSizeOption" name="PageSizeOption" v-on:change="catalog.loadProducts($event.target.value)" aria-label="@Loc["Catalog.PageSize"]">
                        <template v-for="item in catalog.Model.PagingFilteringContext.PageSizeOptions">
                            <option :selected="item.Selected" :value="item.Value" :disabled="false">
                                {{item.Text}}
                            </option>
                        </template>
                    </select>
                </div>
            </template>
            @*Rendering view mode selectors*@
            <template v-if="catalog.Model.PagingFilteringContext.AllowProductViewModeChanging">
                <template v-if="catalog.Model.PagingFilteringContext.AvailableViewModes.length > 1">
                    <div class="sort-container order-3 d-inline-flex ml-sm-0 ml-auto change-view">
                        <template v-for="viewmode in catalog.Model.PagingFilteringContext.AvailableViewModes">
                            <a class="viewmode-icon d-flex align-items-center" v-bind:class="{ selected: viewmode.Selected, 'text-info': viewmode.Selected }" @@click="catalog.loadProducts(viewmode.Value)" :title="viewmode.Text">
                                <template v-if="viewmode.Value.includes('viewmode=grid')">
                                    <b-icon scale="2" icon="grid3x2-gap" class="grid-icon"></b-icon>
                                    <span class="sr-only">viewmode grid</span>
                                </template>
                                <template v-else>
                                    <b-icon scale="2" icon="list" class="list-icon"></b-icon>
                                    <span class="sr-only">viewmode list</span>
                                </template>
                            </a>
                        </template>
                    </div>
                </template>
            </template>
        </div>
    </div>
</template>